let layer;

layui.use(function(){
    layer = layui.layer;
})
let captchaImg = document.getElementById("captchaImg");
let btn = document.querySelector("#submitBtn");
let message = document.querySelector("#message");
captchaImg.onclick = function(){
    // this = captchaImg;
    captchaImg.src = ctx + "captcha?" + new Date().getTime();
}

var myForm = document.myForm;

myForm.onkeydown = function (e){
    if (e.keyCode == 13){
        btn.click();
    }
}

btn.onclick = function(e){
    console.log(e);
    // 获取表单数据
    let username = myForm.username.value;
    let password = myForm.password.value;
    let captcha = myForm.captcha.value;

    let flag = true;
    // 用户名校验，只能是数字，字母组合，首字母不能是数字，5 - 20 位
    let usernameReg = /^[a-zA-Z][a-zA-Z0-9]{4,19}$/;
    if (!usernameReg.test(username)){
        setInnerHTML(myForm.username, "用户名格式不正确");
        myForm.username.focus(); // 聚焦
        flag = false;
    } else {
        clearInnerHTML(myForm.username)
    }

    debugger; // 断点. 浏览器控制台打开，当代码执行到这里，会暂停
    // 密码校验，只能是数字，字母组合，首字母不能是数字，6 - 20 位
    let passwordReg = /^[a-zA-Z][a-zA-Z0-9]{5,19}$/;
    if (!passwordReg.test(password)){
        setInnerHTML(myForm.password, "密码格式不正确");
        myForm.password.focus(); // 聚焦
        flag = false;
    } else {
        clearInnerHTML(myForm.password)
    }

    // 验证码校验，只能是数字，4 位
    let captchaReg = /^[a-zA-Z0-9]{4}$/;
    if (!captchaReg.test(captcha)){
        // 验证码输入框的下下一个兄弟节点
        // myForm.captcha.nextElementSibling.nextElementSibling.innerHTML = "验证码格式不正确";
        // 验证码输入框父元素的最后一个子元素
        setInnerHTML(myForm.captcha, "验证码格式不正确");
        myForm.captcha.focus(); // 聚焦
        flag = false;
    } else {
        clearInnerHTML(myForm.captcha)
    }
    if (flag) {
        var loadIndex = layer.msg('登录中...', {
            icon: 16,
            shade: 0.6,
            time:0
        });
        // 提交表单, 通过js发送提交数据请求
        axios.post(ctx + 'login', {
            "username": username,
            "password": password,
            captcha
        }, {
            headers: {
                // "Content-Type": "application/x-www-form-urlencoded"
            }
        })
            .then(function (response) {
                layer.close(loadIndex);
                console.log(response.data);
                let result = response.data; // 获取响应数据
                if (result.code == 200){
                    // 登录成功
                    window.location.href = ctx + result.data;
                } else {
                    // 登录失败
                    if (result.code == 500){
                        // 参数校验失败
                        let obj = result.data;
                        if (obj.username){
                            setInnerHTML(myForm.username, obj.username);
                            myForm.username.focus();
                        } else {
                            clearInnerHTML(myForm.username);
                        }
                        if (obj.password){
                            setInnerHTML(myForm.password, obj.password);
                            myForm.password.focus();
                        } else{
                            clearInnerHTML(myForm.password);
                        }
                        if (obj.captcha){
                            setInnerHTML(myForm.captcha, obj.captcha);
                            myForm.captcha.focus();
                        } else {
                            clearInnerHTML(myForm.captcha);
                        }
                    } else {
                        // 弹出提示框
                        message.innerHTML = result.message;
                        // myForm.reset(); // 重置表单
                        myForm.captcha.value = "";

                        // 选中密码文本
                        myForm.password.select();
                    }
                    // 验证码刷新
                    captchaImg.click();
                }
            })
            .catch(function (error) {
                layer.close(loadIndex);
                message.innerHTML = "服务器异常，请联系管理员";
            });


    }
}

function clearInnerHTML(dom){
    dom.parentNode.lastElementChild.innerHTML = "";
}

function setInnerHTML(dom, msg){
    dom.parentNode.lastElementChild.innerHTML = msg;
}